<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal</a-button>
    <div class="modelbox" v-show="visible">
      <div class="topbox">
        <CloseCircleOutlined
          :style="{ fontSize: '40px', color: '#fff' }"
          @click="handleOk"
        />
      </div>
      <div class="centerbox">
        <video
          ref="isvideo"
          @timeupdate="updateTime"
          @canplay="getDuration"
          width="988"
          height="527"
          controls
          autoplay="autoplay"
          disablePictureInPicture="true"
          controlslist="nodownload nofullscreen noremoteplayback"
        >
          <source
            src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4"
          />
          <!-- <source src="movie.ogg" type="video/ogg" /> -->
          您的浏览器不支持 HTML5 video 标签。
        </video>
      </div>
      <div class="bottombox">
        <div class="btnvideo">
          <PlayCircleFilled
            v-show="stop == false"
            :style="{ fontSize: '28px', color: '#fff' }"
            @click="isPlay(false)"
          />
          <PauseCircleFilled
            v-show="stop == true"
            :style="{ fontSize: '28px', color: '#fff' }"
            @click="isPlay(true)"
          />
        </div>
        <div class="_time-current">
          {{ textCurrentTime }}/{{ textTotalTime }}
        </div>
        <div class="_slider" ref="ssliderRef" @click.stop="clickSlider">
          <div class="_slider-cur" :style="{ width: offsetLeft }"></div>
          <i
            class="_slider-btn"
            @click.stop
            :style="{ left: offsetLeft }"
            ref="ssliderBtnRef"
          ></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script >
import { defineComponent, ref, onMounted, computed } from "vue";
import {
  CloseCircleOutlined,
  PlayCircleFilled,
  PauseCircleFilled,
} from "@ant-design/icons-vue";
export default defineComponent({
  components: { CloseCircleOutlined, PlayCircleFilled, PauseCircleFilled },
  setup() {
    const visible = ref(false);
    const textTotalTime = ref("00:00");
    const textCurrentTime = ref("00:00");
    const offsetLeft = ref(0);
    const sliderInfo = ref({
      isMove: false,
      startX: 0,
      oldTime: 0,
      oldOffsetLeft: 0,
    });
    const stop = ref(true);
    const showModal = () => {
      visible.value = true;
    };
    const handleOk = (e) => {
      console.log(e);
      visible.value = false;
      isvideo.value.pause();
    };
    const isvideo = ref(null);
    const ssliderRef = ref(null);
    const ssliderBtnRef = ref(null);
    const updateSlider = (ratio) => {
      if (ratio >= 0 && ratio <= 100) {
        offsetLeft.value = `${ratio}%`;
      }
    };
    const secondToTime = (time = 0) => {
      time = time > 0 ? time : 0;
      const add0 = (num) => (num < 10 ? `0${num}` : num);
      const h = ~~(time / 3600);
      const m = ~~((time % 3600) / 60);
      const s = ~~(time % 60);
      return (h > 0 ? [h, m, s] : [m, s]).map(add0).join(":");
    };
    const getDuration = () => {
      let s = isvideo.value.duration; //获取视频的总时长
      textTotalTime.value = secondToTime(s);
    };
    const updateTime = () => {
      let s = isvideo.value.currentTime; //获取当前播放时间
      textCurrentTime.value = secondToTime(s);
    };
    //计算属性播放时间秒数
    const jdtCurrentTime = computed({
      set() {
        let s = isvideo.value.currentTime;
        return (textCurrentTime.value = secondToTime(s));
      },
    });
    const getwidth = computed({
        set() {
            let s = isvideo.value.currentTime;
            let totals = isvideo.value.duration;
          return (offsetLeft.value = (s/totals)`%`);
        
      },
    //   set(ratio) {
    //     if (ratio >= 0 && ratio <= 100) { 
    //         let s = isvideo.value.currentTime;
    //         let totals = isvideo.value.duration;
    //       return (offsetLeft.value = (s/totals)`%`);
    //     }
    //   },
    });
    //计算属性进度条的点儿
    const sliderRef = computed(() => ssliderRef.value);
    // 播放暂停点击方法
    const isPlay = (val) => {
      stop.value = !val;
      if (stop.value == true) {
        //播放状态
        isvideo.value.play();
      } else if (stop.value == false) {
        //暂停状态
        isvideo.value.pause();
      }
    };
    //点击进度条
    const clickSlider = (event) => {
      const sliderW = sliderRef.value.offsetWidth;
      const curOffestLeft =
        event.clientX - event.target.getBoundingClientRect().left;
      offsetLeft.value = `${~~((curOffestLeft / sliderW) * 100)}%`;
      updateVideoState(); //根据点击的位置，进度跟上
    };
    const updateVideoState = () => {
      let s = isvideo.value.duration;
      const newSecond = ~~(s * (parseFloat(offsetLeft.value) / 100));
      isvideo.value.currentTime = newSecond;
      textCurrentTime.value = newSecond;
      stop.value == true;
    };
    //生命周期mounted
    onMounted(() => {});
    return {
      visible,
      textTotalTime,
      textCurrentTime,
      offsetLeft,
      sliderInfo,
      stop,
      isvideo,
      sliderRef,
      ssliderRef,
      ssliderBtnRef,
      getDuration,
      updateTime,
      jdtCurrentTime,
      clickSlider,
      updateSlider,
      getwidth,
      isPlay,
      showModal,
      handleOk,
    };
  },
});
</script>
<style lang="less" scoped >
video::-webkit-media-controls-enclosure {
  display: none;
}
video::-webkit-media-controls-fullscreen-button {
  display: none; //更改是否显示全屏按钮
}
video::-webkit-media-controls-play-button {
  display: none;
} // 更改是否显示播放暂停按钮
video::-webkit-media-controls-timeline {
  display: none;
} //更改是否显示进度条
video::-webkit-media-controls-current-time-display {
  display: none;
} //更改是否显示播放秒数
video::-webkit-media-controls-time-remaining-display {
  display: none;
} //更改是否显示视频总时间
video::-webkit-media-controls-mute-button {
  display: none;
} //更改是否显示声音
.modelbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  .topbox {
    z-index: 101;
    display: flex;
    justify-content: right;
    margin-top: 40px;
    margin-right: 60px;
    width: 100%;
  }
  .centerbox {
    z-index: 101;
  }
}

.bottombox {
  z-index: 101;
  width: 1276px;
  height: 50px;
  padding: 0 47px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  ._time-current {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
    padding: 0 18px 0 20px;
  }
  ._slider {
    width: 100%;
    height: 0.4em;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    position: relative;
    margin: 0 1em;
    ._slider-cur {
      width: 0;
      height: 100%;
      border-radius: 4px;
      background-color: #4662E6;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 3ms;
    }
    ._slider-btn {
      width: 1em;
      height: 1em;
      display: inline-block;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      transition: all 3ms;
      cursor: pointer;
    }
  }
}
</style>